<ng-container *ngIf="!outlet.isActivated">
    <ts-datepicker #datepickerOne="tsDatepicker" [(ngModel)]="search.params.start" [color]="global.params.color"></ts-datepicker>
    <ts-datepicker #datepickerTwo="tsDatepicker" [(ngModel)]="search.params.end" [color]="global.params.color"></ts-datepicker>
    <div class="toolbar">
        <h4>会员列表</h4>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">昵称</span>
            </div>
            <input [(ngModel)]="search.params.nick" type="text" class="form-control" placeholder="请输入用户昵称关键词">
            <div class="input-group-prepend input-group-append">
                <span class="input-group-text bg-white">手机号</span>
            </div>
            <input [(ngModel)]="search.params.mobile" type="text" class="form-control" placeholder="请输入手机号">
        </div>
        <br>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">创建时间</span>
            </div>
            <input tsToggle [bind]="datepickerOne" [target]="datepickerOne" [value]="search.params.start" type="text" class="form-control bg-white pointer"
                placeholder="开始时间" readonly>
            <div class="input-group-prepend input-group-append">
                <span class="input-group-text bg-white">到</span>
            </div>
            <input tsToggle [bind]="datepickerTwo" [target]="datepickerTwo" [value]="search.params.end" type="text" class="form-control bg-white pointer"
                placeholder="结束时间" readonly>
        </div>
        <br>
        <div class="row">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">共查询到</span>
                    </div>
                    <input type="text" value="{{pagination.total}}" class="form-control text-center bg-white" readonly placeholder="0">
                    <div class="input-group-append">
                        <span class="input-group-text bg-white">条/结果</span>
                    </div>
                </div>
            </div>
            <div class="col-6 text-right m-btn">
                <button (click)="doReset()" class="btn btn-white">
                    <i tsIcon="refresh"></i>
                    <span class="ml-1">重置</span>
                </button>
                <button (click)="doSearch()" class="btn btn-white">
                    <i tsIcon="search"></i>
                    <span class="ml-1">搜索</span>
                </button>
            </div>
        </div>
    </div>
    <div class="p-2">
        <div class="card">
            <div class="card-body">
                <ts-table-load [display]="loading"></ts-table-load>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <tbody>
                            <tr class="font-weight-bold bg-light">
                                <td *ngFor="let th of theads">{{th}}</td>
                            </tr>
                            <tr *ngFor="let td of list">
                                <td>{{td.id}}</td>
                                <td>
                                    <div class="media">
                                        <img tsImg alt="Avatar" class="align-self-center mr-3 rounded-circle" dataSrc="assets/images/404.jpg" [src]="td.avatar" height="40">
                                        <div class="media-body">
                                            <p class="m-0">{{td.nick}}</p>
                                            <p class="m-0 text-muted">
                                                <small *ngIf="td.gender===1" class="text-info">
                                                    <i class="fa fa-mars fa-fw"></i>先生
                                                </small>
                                                <small *ngIf="td.gender===2" class="text-danger">
                                                    <i class="fa fa-mercury fa-fw"></i>女士
                                                </small>
                                                <small *ngIf="td.gender===0" class="text-muted">
                                                    <i class="fa fa-transgender fa-fw"></i>未设置
                                                </small>
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    Lv.{{td.vipLevel}}
                                </td>
                                <td>
                                    积分：
                                    <span class="text-danger">{{td.credit}}</span>
                                    <br> 余额：
                                    <span class="text-success">{{td.balance}}</span>
                                </td>
                                <td>{{td.mobile||'未设置'}}</td>
                                <td>{{td.createdAt.substring(0,10)|date:'yyyy/MM/dd'}}</td>
                                <td>
                                    <span tsTip="详情/编辑" class="btn-icon btn-icon-info" routerLink="detail/{{td.id}}">
                                        <i tsIcon="edit"></i>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-right">
                    <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                        [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页" endTitle="末尾"
                        outline></ts-pagination>
                </div>
            </div>
        </div>
    </div>
</ng-container>

<router-outlet #outlet="outlet"></router-outlet>